<template>
  <div class="activity-contain">
    <div class="main">
      <el-form
        :model="params"
        :rules="rules1"
        ref="params"
        label-width="120px"
        class=""
      >
        <el-form-item
          label="商品名称："
          prop="name"
        >
          <el-input
            v-model="params.name"
            placeholder="请输入商品名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="商品主图："
          prop="cover_images"
        >
          <el-upload
            list-type="picture-card"
            :http-request="myUpload"
            :action="upLoadUrl"
            :class="{uploadShow:uploadShow}"
            :file-list='fileCoverList'
            :on-remove="handleRemoveCover"
            :before-upload="beforeAvatarUpload"
            multiple
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item
          label="商品简介："
          prop="desc"
        >
          <el-input
            v-model="params.desc"
            placeholder="请输入商品简介"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="商品详情图："
          prop="pc_info_images"
        >
          <el-upload
            list-type="picture-card"
            :http-request="myUpload"
            :action="upLoadUrl"
            :class="{uploadShow:uploadShow}"
            :file-list='filePcList'
            :on-remove="handleRemovePc"
            :before-upload="beforeAvatarUpload1"
            multiple
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item
          label="商品类别："
          prop="category_id"
        >
          <el-select
            v-model="params.category_id"
            placeholder="请选择"
          >
            <el-option
              v-for="item in configList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="支付方式："
          prop="pay_type"
        >
          <el-select
            v-model="params.pay_type"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="付款金额："
          prop="balance_cost"
        >
          <el-input
            v-model="params.balance_cost"
            placeholder="请输入付款金额"
          ></el-input>
        </el-form-item>
        <el-form-item
        v-if="params.pay_type == 2 ||params.pay_type == 3"
          label="点券金额："
          prop="coupon_cost"
        >
          <el-input
            v-model="params.coupon_cost"
            placeholder="请输入点券金额"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="运费："
          prop=""
        >
          <el-input
            v-model="params.express_cost"
            placeholder="请输入运费"
            @blur="handleBlur"
          ></el-input>
        </el-form-item>
         <el-form-item
          label="商品详情"
          prop="intro"
        >
          <el-input
            v-model="params.intro"
            type="textarea"
            placeholder="请输入商品详情"
            @blur="handleBlur"
          ></el-input>

        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm('params')"
          >保存</el-button>
          <el-button
            @click="$router.back()"
            type="primary"
          >返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
let CONSTANT = require("../constant/constant.js");
let common = require("../common.js");
export default {
  data() {
    return {
      id: "",
      upLoadUrl: "",
      dialogImageUrl: "",
      uploadShow1: false,
      uploadShow: false,
      dialogVisible: false,
      fileCoverList: [],
      filePcList: [],
      takeoutId: "",
      rules1: {

        name: [{ required: true, message: "请输入商品名字", trigger: "blur" }],
        desc: [{ required: true, message: "请输入商品简介", trigger: "blur" }],
        cover_images: [
          { required: true, message: "请上传商品主图", trigger: "blur" }
        ],
        pc_info_images: [
          { required: true, message: "请上传商品详情图", trigger: "blur" }
        ],
        pay_type: [
          { required: true, message: "请选择支付方式", trigger: "blur" }
        ],
        category_id: [
          { required: true, message: "请选择支付方式", trigger: "blur" }
        ]
      },
      provinceList: [],
      cityList: [],
      imageUrl: "",
      url: "",
      params: {
        name: "",
        desc: "",
        cover_images: [],
        pc_info_images: [],
        mobile_info_images:[],
        express_cost: "",
        balance_cost: "",
        coupon_cost: "",
        category_id: "",
        intro:''
      },
      configList:[],
      options: [
        {
          label: "余额",
          value: 1
        },
        {
          label: "点券",
          value: 2
        },
        {
          label: "余额+点券",
          value: 3
        }
      ]
    };
  },
  components: {
    "bg-editor": () => import("./common/bg-editor.vue")
  },
  created() {},
  mounted() {
    this.id = this.$router.currentRoute.query.id;
    this.getList();
    if (this.id) {
      this.getDetail();
    }
  },
  methods: {
    getList() {
      let url = CONSTANT.URL.classList;
      common.requestGetAjax(url, {}, {}, res => {
        if (res.status == 0) {
          this.configList = res.data;
        } else {
          this.$message({
            message: res.msg,
            type: "warning"
          });
        }
      });
    },
    editorInfo(val) {
      this.params.intro = val;
    },
    getDetail: function() {
      let url = CONSTANT.URL.productDetail;
      common.requestGetAjax(url, {}, { product_id: this.id }, res => {
        if (res.status == 0) {
        
          this.params = Object.assign(res.data, { product_id: res.data.id });
          res.data.cover_images.map(item => {
            this.fileCoverList.push({
              url: item
            });
          });
          res.data.pc_info_images.map(item => {
            this.filePcList.push({
              url: item
            });
          });
          console.log(res.data.pc_info_images,res.data,this.filePcList)
        }
      });
    },
    beforeAvatarUpload(file) {
      const formData = new FormData();
      formData.append("file", file);
      let url = CONSTANT.URL.upload;
      common.requestAjax(url, formData, {}, res => {
        if (res.status == 0) {
          this.fileCoverList.push({
            url: res.data.url
          });
        }
      });
    },
    beforeAvatarUpload1(file) {
      const formData = new FormData();
      formData.append("file", file);
      let url = CONSTANT.URL.upload;
      common.requestAjax(url, formData, {}, res => {
        if (res.status == 0) {
          this.filePcList.push({
            url: res.data.url
          });
        }
      });
    },
    myUpload(content) {
      // 重写覆盖上传方法
    },
    handleRemoveCover(file, fileList) {
      this.fileCoverList = fileList;
    },
    handleRemovePc(file, fileList) {
      this.filePcList = fileList;
    },

    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    submitForm(formName) {
      this.params.cover_images = [];
      this.params.pc_info_images = [];
      this.fileCoverList.map(item => {
        this.params.cover_images.push(item.url);
      });
      this.filePcList.map(item => {
        this.params.pc_info_images.push(item.url);
      });
      this.params.mobile_info_images = this.params.pc_info_images
      this.$refs[formName].validate(valid => {
        if (valid) {
          let url = this.id
            ? CONSTANT.URL.productEdit
            : CONSTANT.URL.productSave;
          common.requestAjax(url, this.params, null, res => {
            if (res.status == 0) {
              this.$message({
                type: "success",
                message: "保存成功!"
              });
              this.$router.back();
            } else {
              this.$message({
                type: "error",
                message: res.msg
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleBlur(e) {
      console.log(e);
      if (e.target.value) {
        this.params.pay_type = 1;
      }
    }
  }
};
</script>

<style lang="scss" scoped >
.activity-contain {
  .header {
    height: 46px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dedede;
    p {
      float: left;
      height: 36px;
      line-height: 36px;
      margin: 0 0 0 10px;
      font-size: 18px;
    }
    .el-button {
      float: right;
      margin-right: 5%;
    }
  }
  .tip-img {
    font-size: 12px;
    color: red;
  }
  .main {
    // width:500px;
    //max-width: 1500px;
    .el-textarea {
      width: 60%;
    }
    .car-info {
      .car-list {
        overflow: hidden;
        .el-form-item {
          float: left;
          .el-input,
          .el-select {
            width: 150px;
          }
        }
      }
    }
    margin: 20px 0 0 40px;
    clear: both;
    .el-input,
    .el-select {
      width: 250px;
    }
    .modal-body {
      .note-image-input {
        display: block;
      }
    }
  }
}
</style>
<style>
.distpicker-address-wrapper select {
  margin-right: 20px;
}
.panel-heading {
  position: relative !important;
}
.note-toolbar {
  z-index: 10 !important;
}
.uploadShow .el-upload {
  display: none;
}
</style>

